<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="box">
  <span v-if="num>90">好</span>
  <span v-else-if="num>60">良好</span>
  <span v-else-if="num>20">不好</span>
  <span v-else="num">gun</span>
  <p v-show="num<10">22</p>
  <div v-for="(val,index) in arr" :key=index>
    {{val}}
  </div>
  <div v-for="(val,index) in arrName" :key=index>
    {{val.name}}
  </div>
</div>
<script>
  new Vue({
    el: '#box',
    data: {
      num: 60,
      arr: ['张三', '李四', '王五'],
      arrName: [
        { 'name': 'Tom' },
        { 'name': 'Jok' },
        { 'name': 'lily' }]
    }
  })
</script>





<!-- <div id="box">
  <input type="text" v-model.number="val">+
  <input type="text" v-model.number="val1">
  <span>{{val + val1}}</span>
</div>
<script>
  new Vue({
    el: "#box",
    data: {
      val: '',
      val1: ''
    }
  })
</script> -->




<!-- <div id="app">
  <div>{{msg}}</div>
  <h1>{{age*5}}</h1>
  <h2>{{age/5}}</h2>
  <img v-bind:src='img' style="width: 100px;height: 100px;">
  <p v-text="p"></p>
  <p v-html="p1"></p>
  <input type="text" v-model="val">
  <p>{{val}}</p>
  <div :class="cal">1222</div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: "hello 侯",
      age: 10,
      img: "https://pic2.zhimg.com/v2-0dda71bc9ced142bf7bb2d6adbebe4f0_r.jpg?source=1940ef5c",
      p: '<h1>1521</h1>',
      p1: '<h1>1521</h1>',
      val: '',
      cal: 'box',
    }
  })
</script> -->

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <span>{{name}}</span>
  <img v-bind:src="img" alt="">
  <input type="text" v-model.number="num1">+
  <input type="text" v-model.number="num2">
  <span>{{num1+num2}}</span>
  <div :style="ba"></div>
  <p v-text="p"></p>
  <p v-html="p"></p>
  <div :class="cl"></div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      name: "猴子",
      img: "https://pic2.zhimg.com/v2-0dda71bc9ced142bf7bb2d6adbebe4f0_r.jpg?source=1940ef5c",
      num1: '',
      num2: '',
      ba: 'width: 500px;height: 100px;background-color: aqua;',
      p: '<h1>123</h1>',
      cl: 'box'
    }
  })
</script>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: aqua;
  }
</style>

<!-- <div id="app">
  <table border="1">
    <tr>
      <td v-for="(item,index) in arr" :key="item.id">{{item.name}}-{{item.age}}</td>
    </tr>
  </table>
  <div v-for="(value,key,index) in obj">{{value}}</div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      arr: [{
        id: 0,
        name: '张三',
        age: 18,
      }, {
        id: 1,
        name: '李四',
        age: 39,
      }, {
        id: 2,
        name: '王五',
        age: 25,
      },],
      obj: {
        name: '侯侯',
        age: 18
      }
    }
  })
</script> -->



<div id="app">
  <button @click="fn()">按钮</button>
  <ul>
    <li v-for="(item,index) in arr" :key="item.id" v-color="index">{{item.name}}</li>
  </ul>
</div>
<script>
  Vue.directive('color', function (ele, obj) {
    if (obj.value % 2 == 0) {
      ele.style.backgroundColor = 'red'
    } else {
      ele.style.backgroundColor = 'yellow'
    }
  })
  new Vue({
    el: "#app",
    data: {
      arr: [{
        id: 0,
        name: '张三',
        age: 18,
      }, {
        id: 1,
        name: '李四',
        age: 39,
      }, {
        id: 2,
        name: '王五',
        age: 25,
      }, {
        id: 3,
        name: '赵六',
        age: 25,
      },],
    },
    methods: {
      fn() {
        console.log(5555);
      }
    }
  })
</script>